{{define "/chat/main.shtml"}}
<div v-show="win!='main'">
  <header class="mui-bar mui-bar-nav">
    <a class="mui-icon mui-icon-left-nav mui-pull-left" @tap="win='main'"></a>
    <h1 class="mui-title" v-text="title"></h1>
  </header>
  <div id="convo" data-from="Sonu Joshi">
    <ul class="chat-thread">
      <!--群聊且item.dstid=当前msgcontext.dstid
        <span v-text="JSON.stringify(msglist)"></span>
      -->
      <!-- 发送人和聊天人一致 -->
      <li class="chat" :class="item.ismine ? 'mine' : 'other'"
        v-for="item in msglist"
        v-if="item.ismine || item.msg.user_id == msgcontext.dst_id">
        <div >
          <img class="avatar" :src="item.user.avatar" />
        </div>
          <span ></span>
          <div class="content">
            <div v-if="item.msg.media == 1" v-text="item.msg.content"></div>
            <img class="pic" v-if="item.msg.media == 4" :src="item.msg.url" />
            <div v-if="item.msg.media == 3" @tap="playaudio(item.msg.url)">
              <img class="audio" src="/asset/images/audiom.png" />
              <span v-text="item.msg.amount"></span>
            </div>
          </div>
      </li>
    </ul>
  </div>
  <div class="flex-container" >
    <div class="item-1" @tap="txtstat='audio'" v-if="txtstat=='kbord'">
      <img src="/asset/images/audio.png" />
    </div>
    <div class="item-1" @tap="txtstat='kbord'" v-if="txtstat=='audio'">
      <img src="/asset/images/kbord.png" />
    </div>
    <div class="item-2" v-if="txtstat=='kbord'">
      <input placeholder="这里写点啥" class="text" type="text" v-model="txtmsg"/>
    </div>
    <div class="item-2" v-if="txtstat=='audio'">
      <input value="请按住说话" type="button" class="text" style="margin-top: 5px;width: 100%; text-align: center" @touchstart="startrecorder" @touchend="stoprecorder">
      </input>
    </div>
    <div class="item-3" @tap="panelstat='doutu'">
      <img src="/asset/images/smile.png" />
    </div>
    <div class="item-4" v-if="!txtmsg" @tap="panelstat='more'">
      <img src="/asset/images/more.png" />
    </div>
    <div class="item-4" v-if="!!txtmsg" @tap="sendtxtmsg(txtmsg)">
      <img src="/asset/images/send.png" />
    </div>
  </div>
  <div id="panels" style="display: flex">
    <div v-if="panelstat=='doutu'">
      <div class="doutures" >
        <div @tap="sendpicmsg(item)" class="res" v-for="item in doutu.choosed.assets">
          <img :class="doutu.choosed.size ||'small'"  :src="item" />
        </div>
      </div>
      <div class="doutupkg">
        <div class="pkg" @tap="doutu.choosed=item" v-for="item in doutu.packages">
          <img :class="item.size || 'small'"  :src="item.icon" />
        </div>
      </div>
    </div>
    <div v-if="panelstat=='more'" class="plugins">
      <div class="plugin" @tap="dispatchplugin(item)" v-for="item in plugins">
        <img  :src="item.icon" />
        <div v-html="item.slot"></div>
        <p v-text="item.name"></p>
      </div>
    </div>
  </div>
</div>
<audio id="audio" style="display: none"></audio>
<audio id="audio4play" style="display: none"></audio>
{{end}}
